<template>
  <div id="riskwarningDetails" class="riskwarningDetails">
    <div id="left">
      <div style="margin-left:478px;background-color: #fff;padding-bottom: 20px;" id="leftone">
        <div class="header" v-if="detaildata['basics'] != null">
          <div class="header" v-if="detaildata['basics'] != null">
            <p v-if='showreport' class="bigleft">
              <at-tooltip :content= "detaildata['basics'].risk_event_name" :placement="'top'">
                <span style="font-size: 14px;display: inline-block; max-width: 500px;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">
                 {{ detaildata['basics'].risk_event_name }}
                </span>
              </at-tooltip>
            </p>
            <p v-else class="bigleft">
              <at-tooltip :content= "detaildata['basics'].risk_event_name" :placement="'top'">
                <span style="font-size: 14px;display: inline-block; max-width: 500px;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">
                 {{ detaildata['basics'].risk_event_name }}包含的告警信息
                </span>
              </at-tooltip>
            </p>
          </div>
        </div>
        <div style="float:right;position:relative;top:-40px;right:20px" id="buttonone">
          <!-- <at-button  type="primary" v-if="$route.query.aearly_warn == 0 && iscomit =='1'" @click="yujing">预警下发</at-button> -->
          <at-button  type="primary" v-if="!detaildata.warn" @click="yujing">预警下发</at-button>
          <at-button id="exportPdfone" type='primary' @click="emergency" v-if="$route.query.analysisid != null" >{{ buttonname }}</at-button>
          <at-button id="exportPdf" type="primary" @click='downloadPdf'><i class="saas-icon-res-down" style="font-size:20px;vertical-align: middle;"></i>PDF下载</at-button>
          <!-- <at-button id="exportPdfone" type='primary' style="background-color:#4990ff" @click="emergency" v-if="$route.query.analysisid != null">{{ buttonname }}</at-button> -->
          <!-- <at-button id="exportPdf"  @click="downloadPdf" type="primary" atprimaryImg="download">PDF下载</at-button> -->
        </div>
        <div v-if='showreport' style="margin-top:20px;margin-left:20px;margin-right:20px">
          <div style="border:1px solid #eee" v-if="detaildata['basics'] != null">
              <div class="header">
                  <span class="bigleft" style=" font-size: 12px">基本信息</span>
              </div>
              <div>
                <table>
                  <tr>
                    <td class="basictitle"><span>风险事项名称</span></td>
                    <td class="basiccontent"><span class="blue">{{detaildata['basics'].risk_event_name}}</span></td>
                    <td class="basictitle"><span>依据</span></td>
                    <td class="basiccontent">
                      <span v-if="detaildata['basics'].analysis_basis" style="color:rgb(31, 146, 239);cursor:pointer" @click="download(detaildata['basics'].analysis_basis)">
                        {{detaildata['basics'].analysis_basis.split('/')[detaildata['basics'].analysis_basis.split('/').length-1]}}
                      </span>
                      <span v-else>-</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>风险事项等级</span></td>
                    <td class="basiccontent">
                      <span v-html="detaildata['basics'].risk_event_level == '1' ? '一般' : detaildata['basics'].risk_event_level == '2' ? '较大' : detaildata['basics'].risk_event_level == '3' ? '重大' : '特大'">
                        {{detaildata['basics'].risk_event_level}}
                      </span>
                    </td>
                    <td class="basictitle"><span>风险事项类型</span></td>
                    <td class="basiccontent"><span>{{detaildata['basics'].risk_event_type}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>创建时间</span></td>
                    <td class="basiccontent">
                      <span>{{detaildata['basics'].r_time.substring(0,10)}}</span>
                    </td>
                    <td class="basictitle"><span>创建人</span></td>
                    <td class="basiccontent"><span>{{detaildata['basics'].r_person}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>风险事项描述</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="blue" v-if="detaildata['basics'].risk_event_content">
                        {{detaildata['basics'].risk_event_content}}
                      </span>
                      <span v-else>-</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>解决方案</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="blue" v-if="detaildata['basics'].solution">
                        {{detaildata['basics'].solution}}
                      </span>
                      <span v-else>-</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>备注</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="blue" v-if="detaildata['basics'].remark">
                        {{detaildata['basics'].remark}}
                      </span>
                      <span v-else>-</span>
                    </td>
                  </tr>
                </table>
              </div>
          </div>
          <!-- 修改删除提交功能项 -->
          <!-- <div style="height:50px;padding-top:20px;" v-if="$route.query.aearly_warn == 0">
            <div style="float:right;position:relative;right:20px">
              <at-button  type="primary" v-if="$route.query.aearly_warn == 0 && iscomit =='1'" @click="yujing">预警下发</at-button>
            </div>
          </div> -->

          <!--事件信息 -->
          <div style="border:1px solid #eee;" v-if="this.$route.query.analysisid != null">
              <div class="header">
                  <span class="bigleft" style="font-size: 12px">事件信息</span>
              </div>
              <table v-if="detaildata['correlation']">
                <tr>
                  <td class="basictitle"><span>事件名称</span></td>
                  <td class="basiccontent" colspan="5">
                    <at-tooltip :content= "detaildata['correlation'].event_name" :placement="'top'">
                      <span style="display: inline-block; max-width: 1000px;overflow: hidden;height: 40px;line-height: 45px; white-space: nowrap;text-overflow: ellipsis; overflow: hidden">
                        {{detaildata['correlation'].event_name}}
                      </span>
                    </at-tooltip>
                  </td>
                </tr>
                <tr>
                  <td class="basictitle"><span>事件等级</span></td>
                  <td class="basiccontent" colspan="5" v-html="detaildata['correlation'].threaten_level == '1' ? '低危' : detaildata['correlation'].threaten_level == '2' ? '中危' : detaildata['correlation'].threaten_level == '3' ? '高危' : '严重'">
                    <span>{{detaildata['correlation'].threaten_level}}</span>
                  </td>
                </tr>
                <tr>
                  <td class="basictitle"><span>事件描述</span></td>
                  <td class="basiccontent" colspan="5"><span class="blue">{{detaildata['correlation'].event_desc}}</span></td>
                </tr>
                <!-- <tr>
                  <td class="basictitle"><span>解决方案</span></td>
                  <td class="basiccontent" colspan="5"><span class="blue">derailsData.risk_event_name</span></td>
                </tr> -->
              </table>
          </div>

          <div class="basic" style="margin-top: 20px;" v-for="(key,value) in correlation">
              <div class="header">
                <at-tooltip :content= "key.element_name" :placement="'top'">
                  <span class="bigleft" style="font-size: 12px;max-width: 1000px;white-space: nowrap;text-overflow: ellipsis; overflow: hidden">关键风险:{{key.element_name}}</span>
                </at-tooltip>
              </div>
              <!--影响范围 -->
              <div  class="basicborder">
                <span class="fontheight">影响范围</span>
                <table>
                  <tr>
                    <td class="basictitle"><span>影响机构：</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="nodeclass">
                        {{key.effect_agency}}
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>影响系统：</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="nodeclass">
                        {{key.effect_info_sys}}
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>影响节点：</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="nodeclass">
                        {{key.effect_sys_node}}
                      </span>
                    </td>
                  </tr>
                </table>
              </div>
              <!--相关攻击事件 -->
              <div  class="basicborder" v-if="key.attack != null" v-for="(item,value) in key.attack">
                <span class="fontheight">相关攻击事件</span>
                <table>
                  <tr>
                    <td class="basictitle"><span>事件名称</span></td>
                    <td class="basiccontent" colspan="5"><span class="blue">{{item.risk_event_name}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>攻击次数</span></td>
                    <td class="basiccontent"><span class="blue">{{item.attack_num}}</span></td>
                    <td class="basictitle"><span>威胁级别</span></td>
                    <td class="basiccontent">
                      <span
                        class="blue"
                        :class="['risklevel',item.risk_event_level == '1' ? 'LowRisk' : item.risk_event_level == '2' ? 'MiddleRisk' : item.risk_event_level == '3' ? 'HighRisk' : 'SeriousRisk']"
                        v-html="item.risk_event_level == '1' ? '低 危' : item.risk_event_level == '2' ? '中 危' : item.risk_event_level == '3' ? '高 危' : '严 重'">
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>首次攻击时间</span></td>
                    <td class="basiccontent"><span class="blue">{{item.start_time}}</span></td>
                    <td class="basictitle"><span>最近攻击时间</span></td>
                    <td class="basiccontent"><span class="blue">{{item.new_time}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>事件描述</span></td>
                    <td class="basiccontent" colspan="5"><span class="blue">{{item.risk_event_content}}</span></td>
                  </tr>
                </table>
              </div>

              <!--相关风险事件 -->
              <div  class="basicborder"  v-if="key.history != null" v-for="(one,value) in key.history">
                <span class="fontheight">
                相关风险事件
                </span>
                <table>
                  <tr>
                    <td class="basictitle"><span>事件名称</span></td>
                    <td class="basiccontent" colspan="5"><span class="blue">{{one.risk_event_name}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>事件等级</span></td>
                    <td class="basiccontent"><span class="blue" v-html="one.risk_event_level == '1' ? '一般' : one.risk_event_level == '2' ? '较大' : one.risk_event_level == '3' ? '重大' : '特大'">{{one.risk_event_level}}</span></td>
                    <td class="basictitle"><span>事件类型</span></td>
                    <td class="basiccontent"><span class="blue">{{one.risk_event_type}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>事件描述</span></td>
                    <td class="basiccontent" colspan="5"><span class="blue">{{one.risk_event_content}}</span></td>
                  </tr>
                </table>
              </div>

              <!--相关情报事件 -->
              <!-- <div class="basicborder">
                <span class="fontheight">
                相关情报
                </span>
                <table>
                  <tr>
                    <td class="basictitle"><span>关键要素</span></td>
                    <td class="basiccontent"><span class="blue">derailsData.risk_event_name</span></td>
                    <td class="basictitle"><span>情报获取时间</span></td>
                    <td class="basiccontent"><span class="blue">derailsData.risk_event_name</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>情报类型</span></td>
                    <td class="basiccontent"><span class="blue">derailsData.risk_event_name</span></td>
                    <td class="basictitle"><span>来源</span></td>
                    <td class="basiccontent"><span class="blue">derailsData.risk_event_name</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>情报描述</span></td>
                    <td class="basiccontent" colspan="5"><span class="blue">derailsData.risk_event_name</span></td>
                  </tr>
                </table>
              </div> -->
          </div>
        </div>
        <div v-else style="margin-left:20px;margin-right:20px;">
            <span style=" display: inline-block;height: 40px;line-height: 40px;">
                此次风险事情，共监测到要素{{appendix['statistical'].sumelement}}
                个，共影响节点数量{{appendix['statistical'].sys_node_num}}个，
                共影响机构数量{{appendix['statistical'].info_sys_num}}个
            </span>
            <div v-for="key in appendix['warninfos']">
              <div style="background:#fff;margin-left:20px;margin-right:20px;">
                <div class="UnitMergeinfo">
                  <span style="float:left;margin-left:20px;">{{key.unitname['element_name']}}</span>
                  <span style="float:right;margin-right:20px;">告警数量{{key.data.length}}</span>
                </div>
                <div style='padding:20px;clear:both'>
                  <at-table style="width:100%"  :data="key.data" :show-header="true" >
                    <at-table-column prop="time" label="产生时间"  :show-overflow-tooltip="true">
                    </at-table-column>
                    <at-table-column prop="sys_name" label="节点名称"  :show-overflow-tooltip="true">
                    </at-table-column>
                    <at-table-column prop="log_level" label="日志级别"  :show-overflow-tooltip="true">
                    </at-table-column>
                    <at-table-column prop="tag" label="日志标签"  :show-overflow-tooltip="true">
                    </at-table-column>
                  </at-table>
                </div>
              </div>
            </div>
        </div>
        <at-dialog title="选择预警范围" :visible.sync="dialogVisible" size="tiny">
          <div style="1px solid #eee">
            <at-form ref="riskform" label-width='110px' :model="form" :rules="rules">
              <at-form-item project='mh' label="预警范围：" prop='warnflag' >
                <at-radio-group class="radio_group" v-model="form.warnflag" @change='changeradio'>
                  <at-radio-wall label="对全部机构预警"></at-radio-wall>
                  <at-radio-wall label="对部分机构预警"></at-radio-wall>
                </at-radio-group>
              </at-form-item>
              <div class="treediv"  v-show='showrisklussedform'>
                <at-input placeholder="输入关键字进行过滤" v-model="filterText" ></at-input>
                <at-tree :data="allunitnames" ref='tree' node-key="key" :filter-node-method="filterNode"
                          :props="defaultProps" check-strictly  @check-change="handleCheckChange" show-checkbox>
                </at-tree>
                <div style='background:#fff;vertical-align: top;cursor:pointer;font-size: 12px;height:40px;line-height:40px;color: #5c6781;' v-if = 'showcheckunit'>
                    （已选{{belongcount}}）
                </div>
                <div v-show='error' style="font-size: 12px;color:#e33a51;margin-top: 10px">请选择“部分预警”的接收单位。
                </div>
              </div>
            </at-form>
          </div>
          
          <div style="text-align: center;height: 50px;line-height: 50px;">
            <at-button type="primary" @click="submitupdate('riskform')">确定</at-button>
            <at-button @click="resetupdate('riskform')">取消</at-button>
          </div>
        </at-dialog>
      </div>
    </div>
    <div id="right">
      <div style="background-color: #fff;margin-left:20px;margin-right:20px;margin-top:20px;border:1px solid #eee" v-if="TimeLineData != null">
          <div class="operation">
            <span style="margin-left:20px;font-size: 14px;color: #5c6781;line-height: 50px; font-weight: bold">预警信息</span>
          </div>
          <div>
            <!-- v-for="(operate,value) in TimeLineData" -->
            <table>
                <tr>
                  <td class="basictitle"><span>下发时间</span></td>
                  <td class="basiccontentone"><span class="blue">{{TimeLineData['r_time']}}</span></td>
                </tr>
                <tr>
                  <td class="basictitle"><span>预警下发人</span></td>
                  <td class="basiccontentone"><span class="blue">{{TimeLineData['user_name']}}</span></td>
                </tr>
                <tr>
                  <td class="basictitle"><span>预警接收单位</span></td>
                  <td class="basiccontentone" id="basiccontent">
                    <span v-for="(person, value) in TimeLineData['warn_person']" :key="value">
                      {{person}}</span>
                    </td>
                </tr>
              </table>
          </div>
      </div>
      <div v-if="TimeLineData == null">
        <span style="display: inline-block;line-height: 20px;text-align: center;width:100%;font-size:12px;color: #5c6781;margin-top:20px">当前没有风险预警下发信息！</span>
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from '../../../utils/html2canvas.js'
import jsPDF from '../../../utils/jspdf.min.js'
import { mapState } from 'vuex'
import { Notification } from 'atelement'

export default {
  name: 'warningdetails',
  data () {
    return {
      path: this.$route.fullPath,
      detaildata: {},
      correlation: {},
      showreport: true,
      dialogVisible: false,
      // iscomit: 1,
      form: {
        warnflag: false,
        warnunit: [],
        id: 0
      },
      rules: {
        warnflag: [
          { required: true, message: '请选择预警范围', trigger: 'change' }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      showrisklussedform: false,
      showcheckunit: false,
      belongcount: 0,
      error: false,
      filterText: '',
      appendix: {},
      buttonname: '查看告警日志',
      TimeLineData: []
    }
  },
  computed: {
    ...mapState({
      allunitnames: state => state.riskwarning.allunitnames,
      nodesinfo: state => state.riskwarning.nodesinfo
    })
  },
  updated () {
  },
  created () {
    this.$store.dispatch('riskwarningDerails/InitialValue', {data: {'id': this.$route.query.eventid}, fun: this.setitem})
    this.$store.dispatch('riskwarningDerails/alarmlog', {data: {'id': this.$route.query.eventid}, fun: this.setitem})
    this.$store.dispatch('riskwarningDerails/allunitnames')
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  props: {
    closetabs: { type: Function }
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleCheckChange (data, checked, indeterminate) {
      if (checked) {
        this.error = false
        this.belongcount++
        this.form.warnunit.push(data.key)
        this.form.warnunit = Array.from(new Set(this.form.warnunit))
      } else {
        var index = this.form.warnunit.indexOf(data.key)
        if (index > -1) {
          this.form.warnunit.splice(index, 1)
        }
        this.belongcount--
        // this.warnunit
      }
      console.log('check', this.form.warnunit)
    },
    changeradio (val) {
      if (val === '对部分机构预警') {
        this.showcheckunit = true
        this.showrisklussedform = true
        // 拼写下拉框内容
      } else {
        this.showcheckunit = false
        this.showrisklussedform = false
      }
    },
    resetupdate (formName) {
      this.clearFromTree()
      this.dialogVisible = false
    },
    submitupdate (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.warnflag === '对全部机构预警') {
            this.form.warnunit = []
            for (let a = 0; a < this.nodesinfo.length; a++) {
              this.form.warnunit.push(this.nodesinfo[a].key)
            }
            this.form.warnunit = this.form.warnunit.join()
          } else if (this.form.warnunit) {
            this.form.warnunit = this.form.warnunit.join()
          }
          console.log(this.form.warnunit)
          if (this.form.warnunit.length > 0 || this.form.warnflag === '对全部机构预警') {
            let data = JSON.parse(JSON.stringify(this.form))
            this.$store.dispatch('riskwarning/submitWaring', {'postData': data, fun: this.setitem, eventId: {'id': this.$route.query.eventid}})
            // this.iscomit = false
            // this.form.warnunit = []
            this.form.warnflag = false
            this.dialogVisible = false
            // this.$refs[formName].setCheckedKeys([])
            // setTimeout(() => {
            //   this.closetabs(this.path, 'remove')
            // }, 500)
            // this.$router.push({ 'path': '/monitor/warning' })
          } else {
            // this.form.warnunit = []
            Notification.error({
              title: '未选择下发机构'
            })
          }
          this.clearFromTree(formName)
        } else {
          return false
        }
      })
    },
    clearFromTree (formName) {
      if (this.$refs.tree) {
        this.$refs.tree.setCheckedKeys([])
      }
      this.$refs.riskform.resetFields()
      this.form.warnunit = []
      this.filterText = ''
    },
    yujing () {
      // this.$store.dispatch('riskwarning/yujing', {'id': row['arisk_event_id']})
      if (this.dialogVisible) {
        this.dialogVisible = false
      } else {
        this.dialogVisible = true
      }
      this.form.id = this.$route.query.eventid
    },
    download (rows) {
      if (rows !== 'null') {
        this.$store.dispatch('riskwarningDerails/download', {data: {'url': rows}})
      }
    },
    emergency () {
      if (this.buttonname === '查看告警日志') {
        this.showreport = false
        this.buttonname = '查看报告'
      } else if (this.buttonname === '查看报告') {
        this.showreport = true
        this.buttonname = '查看告警日志'
      }
    },
    // 将vuex里的值转化为定值，防止页面刷新数据丢失
    setitem (item, value) {
      this[item] = value
    },
    downloadPdf () {
      document.querySelector('#buttonone').style.display = 'none'
      html2canvas(document.querySelector('#leftone')).then(canvas => {
        var contentWidth = canvas.width
        var contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89
        // 未生成pdf的html页面高度
        var leftHeight = contentHeight
        // 页面偏移
        var position = 0
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28
        var imgHeight = 592.28 / contentWidth * contentHeight

        var pageData = canvas.toDataURL('image/jpeg', 1.0)

        var pdf = new jsPDF('', 'pt', 'a4')

        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            // 避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage()
            }
          }
        }
        // pdf.save('风险预警详情.pdf')
        pdf.save(`${this.detaildata['basics'].risk_event_name}风险预警详情.pdf`)
        document.querySelector('#buttonone').style.display = 'block'
      })
    }
  }
}
</script>
<style lang="less">
#riskwarningDetails{
  .at-radio+.at-radio{
    margin-left: 0px;
  } 
  .at-input .at-input__inner{
    width: 89%;
    margin-left: 4%;
  }
  .at-form{
    margin-top: 0px;
    border: 1px solid #eee
  }
}
</style>
<style lang="less" scoped>
.riskwarningDetails{
  .basictitle{
    vertical-align: top;
    padding-top: 10px;
  }
  .basiccontentone {
    vertical-align: top;
    padding-top: 10px;
  }
}
#riskwarningDetails{
  .nodeclass{
    margin-left: 10px;
    display: inline-block;
  }
  .radio_group+div{
    margin-top: -7px
  }
  .UnitMergeinfo{
    background: #F8F9FA;
    height: 40px;
    line-height: 40px;
  }
  .operation{
    height: 50px;
    overflow: hidden;
    border-bottom: 1px solid #eeeeee;
  }
  #left{
    width: 100%;
    float: left;
    margin-left: -478px;
  }
  #right{
    width: 458px;
    float: right;
    background-color: #fff;
    padding-bottom: 20px;
  }
  .fontheight{
    display: inline-block;
    line-height: 50px;
    margin-left: 20px;
  }
  .basicborder{
    border-bottom: 1px solid #eee;
  }
  .basiccontent{ 
    width: 391px;
    height: 40px;
    word-break: break-all;
  }
  .basiccontentone{ 
    width: calc(268px);
    height: 40px;
    word-break: break-all;
  }
  .basiccontentone span{
    display: inline-block;
    margin-right: 20px
  }
  .basictitle{
    width: 170px;
    height: 40px;
  }
  .basictitle span{
    display: block;
    margin-right: 40px;
    float: right;
    color: #5c6781;
    font-size:12px;
  }
  .basic{
    border: 1px solid #eee;
    border-bottom: 0px;
  }
  .header{
    height: 50px;
    border-bottom: 1px solid #eee;
  }
  .bigleft{
    line-height: 50px;
    display: inline-block;
    margin-left: 20px;
    color: #5c6781;
    font-weight: bold;
  }
}
</style>

